import React, { Component } from 'react';
import { Card, Descriptions, Button, Modal } from 'antd';
import router from 'umi/router';
import { connect } from 'dva';
import ContentModal from '@/components/ContentModal';
import { publishStatus, channelCdList } from './variable';

const mapStateToProps = (state: any) => {
  return {
    pageData: state.messageTemplate?.pageData,
    loading: state.loading.effects['messageTemplate/getFetchPage'],
  };
};
class messageTemplate_show extends Component<any, any> {
  state = {
    isLayer: false,
    layerData: {},
  };
  sendList = {};
  componentDidMount() {
    const { dispatch, location } = this.props;
    const { msgCd, projectId } = location?.query;
    dispatch({
      type: 'messageTemplate/getFetchPage',
      payload: { url: '/message/template/findTemplateDetail', msgCd, projectId },
    });
  }
  goBackFn = () => {
    router.goBack();
  };
  changeVisible = () => {
    this.setState({
      isLayer: false,
      layerData: '',
    });
  };
  previewFn = () => {
    this.setState({
      isLayer: true,
      layerData: this.props.pageData?.tplContent,
    });
  };
  get timeCom() {
    const { pushPeriod, timer, interval } = this.props.pageData;
    return pushPeriod == 1
      ? '实时'
      : pushPeriod == 2
      ? `定时：${timer}`
      : pushPeriod == 3
      ? `间隔：${interval}小时`
      : '';
  }
  get publishStatus() {
    const { pageData } = this.props;
    return publishStatus.find(e => e.value == pageData?.releaseFlag)?.label;
  }
  render() {
    const { loading, pageData } = this.props;
    console.log(pageData)

    return (
      <>
        <Card style={{ paddingLeft: '24px' }} loading={loading}>
          <Descriptions title="消息模板" column={2} style={{ paddingTop: '20px' }}>
            <Descriptions.Item label="模板编号">{pageData?.msgCd}</Descriptions.Item>
            <Descriptions.Item label="模板名称">{pageData?.tplTitle}</Descriptions.Item>
            <Descriptions.Item label="发布状态" span={2}>
              {this.publishStatus}
            </Descriptions.Item>
            <Descriptions.Item label="模板内容" span={2}>
              {pageData?.tplType === 3 ? (
                <div style={{ padding: '0 70px 16px' }}>
                  <Button onClick={this.previewFn}>预览</Button>
                </div>
              ) : (
                <div style={{ whiteSpace: 'normal' }}>{pageData?.tplContent}</div>
              )}
            </Descriptions.Item>
          </Descriptions>
          <Descriptions title="消息渠道" column={2} style={{ paddingTop: '15px' }}>
            <Descriptions.Item label="渠道类型">
              {channelCdList.find(e => e.value == pageData?.channelCd)?.label}
            </Descriptions.Item>
            {pageData?.channelCd != 99 && (
              <Descriptions.Item label="渠道发送方">{pageData?.senderId}</Descriptions.Item>
            )}
            <Descriptions.Item label="扩展字段">
              {pageData.extraArgs ? JSON.stringify(pageData.extraArgs) : ''}
            </Descriptions.Item>
          </Descriptions>
          <Descriptions title="消息属性" column={2} style={{ paddingTop: '15px' }}>
            <Descriptions.Item label="推送方式">{this.timeCom}</Descriptions.Item>
            <Descriptions.Item label="推送频率">
              {pageData?.frequencyTimes}次 {pageData?.frequencyDay}天
            </Descriptions.Item>
            <Descriptions.Item label="应答时长（秒）">{pageData?.ackTimeout}</Descriptions.Item>
            <Descriptions.Item label="重发次数（次）">{pageData?.maxRepeat}</Descriptions.Item>
            <Descriptions.Item label="驻留时长（天）">{pageData?.lengthStay}</Descriptions.Item>
            <Descriptions.Item label="短信签名">{pageData?.smsSignName}</Descriptions.Item>
            <Descriptions.Item label="有效期">
              {pageData?.validityPeriod == 1
                ? '永久有效'
                : pageData?.expireTime
                ? `有效期至${pageData?.expireTime}`
                : ''}
            </Descriptions.Item>
          </Descriptions>
          <div style={{ display: 'flex', justifyContent: 'flex-end', padding: '20px' }}>
            <Button onClick={this.goBackFn}>返回</Button>
          </div>
        </Card>
        {/* <ContentModal
          title="操作入参详细信息"
          width="50%"
          changeVisible={this.changeVisible}
          visible={this.state.isLayer}
          formatData={true}
          detailModelData={this.state.layerData}
        /> */}
        <Modal
          width="50%"
          title="操作入参详细信息"
          visible={this.state.isLayer}
          onCancel={() => this.changeVisible()}
          footer={[
            <Button key="back" type="primary" size="small" onClick={() => this.changeVisible()}>
              返回
            </Button>,
          ]}
        >
          <div dangerouslySetInnerHTML={{ __html: this.state.layerData }}></div>
        </Modal>
      </>
    );
  }
}
export default connect(mapStateToProps)(messageTemplate_show);
